﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();


            function getCurResolution() {
                var view = map.getView();
                //获取最大分辨率
                var curResolution = view.getResolution();
                //弹框显示
                alert("当前分辨率:" + curResolution);
            }

            function getCurBound() {
                var viewextent = map.getView();
                //获取地图范围
                var ex = viewextent.calculateExtent(map.getSize());
                var str = ex[0] + "," + ex[1] + "," + ex[2] + "," + ex[3];
                //弹框显示
                alert("当前范围为：" + str);
            }

            function getMapDivInfo() {
                //获取当前地图容器div的大小
                var viewSize = null;
                viewSize = map.getSize();
                //弹框显示
                alert("当前div高：" + viewSize[1] + " 宽：" + viewSize[0]);
            }

            $("#button1").bind("click", function () {
                getCurResolution();
            });

            $("#button2").bind("click", function () {
                getCurBound();
            });

            $("#button3").bind("click", function () {
                getMapDivInfo();
            });
        }
    </script>
</head>
<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="button1" value="当前分辨率">
        <input type="button" class="ButtonLib" id="button2" value="当前地图范围" />
        <input type="button" class="ButtonLib" id="button3" value="当前视口范围" />
    </div>

    <div id="map">
    </div>
</body>
</html>
